// 柱状图模块
(function() {
    //  1实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    var data = [{
        "name": "一月",
        "value": 80
    }, {
        "name": "二月",
        "value": 87.8
    }, {
        "name": "三月",
        "value": 71
    }, {
        "name": "四月",
        "value": 80
    }, {
        "name": "五月",
        "value": 66
    }, {
        "name": "六月",
        "value": 80
    }, {
        "name": "七月",
        "value": 80
    }, {
        "name": "八月",
        "value": 80
    }, {
        "name": "九月",
        "value": 66
    }, {
        "name": "十月",
        "value": 80
    }, {
        "name": "十一月",
        "value": 80
    }, {
        "name": "十二月",
        "value": 80
    }];
    var xData = [],
        yData = [];
    var min = 50; 
    data.map(function(a, b) {
        xData.push(a.name);
        if (a.value === 0) {
            yData.push(a.value + min);
        } else {
            yData.push(a.value);
        }
    });

    // 2 指定配置项和数据
    var option = {
      color: ['#3398DB'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'line',
              lineStyle: {
                  opacity: 0
              }
          },
          formatter: function(prams) {
              if (prams[0].data === min) {
                  return "月客运量："
              } else {
                  return "月客运量：" + prams[0].data
              }
          }
      },
      legend: {
          data: ['直接访问', '背景'],
          show: false
      },
      grid: {
          left: '0%',
          right: '0%',
          bottom: '5%',
          top: '7%',
          height: '85%',
          containLabel: true,
          z: 22
      },
      xAxis: [{
          type: 'category',
          gridIndex: 0,
          data: xData,
          axisTick: {
              alignWithLabel: true
          },
          axisLine: {
              lineStyle: {
                  color: '#0c3b71'
              }
          },
          axisLabel: {
              show: true,
              color: 'rgb(170,170,170)',
              fontSize:12
          }
      }],
      yAxis: [{
              type: 'value',
              gridIndex: 0,
              splitLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              min: min,
              max: 100,
              axisLine: {
                  lineStyle: {
                      color: '#0c3b71'
                  }
              },
              axisLabel: {
                  color: 'rgb(170,170,170)',
                  formatter: '{value}'
              }
          },
          {
              type: 'value',
              gridIndex: 0,
              min: min,
              max: 100,
              splitNumber: 12,
              splitLine: {
                  show: false
              },
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show: false
              },
              splitArea: {
                  show: true,
                  areaStyle: {
                      color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                  }
              }
          }
      ],
      series: [{
              name: '合格率',
              type: 'bar',
              barWidth: '30%',
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                  normal: {
                      barBorderRadius: 30,
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1, [{
                                  offset: 0,
                                  color: '#00feff'
                              },
                              {
                                  offset: 0.5,
                                  color: '#027eff'
                              },
                              {
                                  offset: 1,
                                  color: '#0286ff'
                              }
                          ]
                      )
                  }
              },
              data: yData,
              zlevel: 11

          },
          {
              name: '背景',
              type: 'bar',
              barWidth: '50%',
              xAxisIndex: 0,
              yAxisIndex: 1,
              barGap: '-135%',
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
              itemStyle: {
                  normal: {
                      color: 'rgba(255,255,255,0.1)'
                  }
              },
              zlevel: 9
          },
        
      ]
    }


    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();
(function() {
    var myChart = echarts.init(document.querySelector(".line .chart"));
    var option = {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              lineStyle: {
                  color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0,
                          color: 'rgba(0, 255, 233,0)'
                      }, {
                          offset: 0.5,
                          color: 'rgba(255, 255, 255,1)',
                      }, {
                          offset: 1,
                          color: 'rgba(0, 255, 233,0)'
                      }],
                      global: false
                  }
              },
          },
      },
      grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
      },
      xAxis: [{
          type: 'category',
          axisLine: {
              show: true
          },
          splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                  color: '#f00'
              },
          },
          axisLabel: {
              color: '#fff'
          },
          splitLine: {
              show: false
          },
          boundaryGap: false,
          data: ['5', '10', '15', '20', '25', '30'],
  
      }],
  
      yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
              }
          },
          axisLine: {
              show: false,
          },
          axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                  color: '#d1e6eb',
  
              },
          },
          axisTick: {
              show: false,
          },
      }],
      series: [{
              name: '注册总量',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: 'circle',
              symbolSize: 15,
              lineStyle: {
                  normal: {
                      color: "#00b3f4",
                      shadowColor: 'rgba(0, 0, 0, .3)',
                      shadowBlur: 0,
                      shadowOffsetY: 5,
                      shadowOffsetX: 5,
                  },
              },
              label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                      color: '#00b3f4',
                  }
              },
              itemStyle: {
                  color: "#00b3f4",
                  borderColor: "#fff",
                  borderWidth: 3,
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 2,
                  shadowOffsetX: 2,
              },
              tooltip: {
                  show: false
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: 'rgba(0,179,244,0.3)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(0,179,244,0)'
                          }
                      ], false),
                      shadowColor: 'rgba(0,179,244, 0.9)',
                      shadowBlur: 20
                  }
              },
              data: [5002, 2050, 3302, 2081, 3908, 2104, ]
          },
          
      ]
      };
    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
})();
(function() {
  //  1实例化对象
  var myChart = echarts.init(document.querySelector(".linezhan .chart"));
  // 2 指定配置项和数据
  var option = {
    legend: {
        top: '16%',
        textStyle: {
            color: '#a4a8b4'
        },
    },
    grid: {
        left: '3%',
        top: '25%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            // margin: 10,
            color: '#a4a8b4',
        }
    },
    yAxis: {
        type: 'category',
        data: ['湖州', '嘉兴', '绍兴', '宁波', '杭州'],
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            // margin: 10,
            color: '#a4a8b4',
        }
    },
    color: [
        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(235,112,236,.8)'
            },
            {
                offset: 0.8,
                color: 'rgba(77,75,221,.8)'
            },
            {
                offset: 1,
                color: 'rgba(77,75,221,0)'
            }
        ]),
        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(255,157,96,.8)'
            },
            {
                offset: 0.8,
                color: 'rgba(246,84,157,.8)'
            },
            {
                offset: 1,
                color: 'rgba(246,84,157,0)'
            }
        ]),
        new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                offset: 0,
                color: 'rgba(132,225,145,.8)'
            },
            {
                offset: 0.8,
                color: 'rgba(106,185,242,.8)'
            },
            {
                offset: 1,
                color: 'rgba(106,185,242,0)'
            }
        ]),
    ],
    series: [{
            name: '',
            type: 'bar',
            xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
            yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
            data: [100, 100, 100, 100, 100, ],
            barWidth: 5,
            itemStyle: {
                normal: {
                    color: 'rgba(255, 255, 255, .1)',
                },
            },
            z: 1
        },
        {
            name: '非公交化率',
            type: 'bar',
            stack: 'Tik Tok',
            barWidth: 25,
            itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(240,82,255,1)'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(77,75,221,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(77,75,221,0)'
                        }
                    ],
                    false
                ),
                borderWidth: 1,
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    offset: [-20, 0],
                    formatter: '{c}%',
                    textStyle: {
                        align: 'center',
                        baseline: 'middle',
                        fontSize: 14,
                        fontWeight: '400',
                        color: '#fff',
                        textShadowColor:'#000',
                        textShadowBlur:'0',
                        textShadowOffsetX:1,
                        textShadowOffsetY:1,
                    }
                },
            },
            data: [36.02, , , 36.02, 6.05, ]
        },
        {
            name: '公交化率',
            type: 'bar',
            stack: 'Tik Tok',
            barWidth: 25,
            itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(102,255,124,.8)'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(106,185,242,.8)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(106,185,242,0)'
                        }
                    ],
                    false
                ),
                borderWidth: 1,
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    offset: [-20, 0],
                    formatter: '{c}%',
                    textStyle: {
                        align: 'center',
                        baseline: 'middle',
                        fontSize: 14,
                        fontWeight: '400',
                        color: '#fff',
                        textShadowColor:'#000',
                        textShadowBlur:'0',
                        textShadowOffsetX:1,
                        textShadowOffsetY:1,
                    }
                },
            },
            data: [63.98, 100, 100, 63.98, 93.5, ]
        },
        {
            name: '',
            type: 'bar',
            data: [100, 100, 100, 100, 100, ],
            barWidth: 10,
            itemStyle: {
                normal: {
                    color: 'rgba(255, 255, 255, .1)',
                },
            },
            z: 1
        },
    ]
};


  // 3 配置项给实例对象
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
  });
})();
(function() {
    //  1实例化对象
    var myChart = echarts.init(document.querySelector(".linepiao .chart"));
    // 2 指定配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            },
        },
      legend: {
          top: '10%',
          textStyle: {
              color: '#a4a8b4'
          },
      },
      grid: {
          left: '3%',
          top: '25%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      xAxis: {
          type: 'value',
          max:100,
          splitLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisLabel: {
              // margin: 10,
              color: '#a4a8b4',
          }
      },
      yAxis: {
          type: 'category',
          data: ["杭州市","湖州市","嘉兴市","宁波市","舟山市","丽水市","金华市","台州市","绍兴市","温州市","衢州市"],
          axisLine: {
              lineStyle: {
                  color: 'rgba(255,255,255,0.3)'
              }
          },
          splitLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLabel: {
              // margin: 10,
              color: '#a4a8b4',
          }
      },
      color: [
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(235,112,236,.8)'
              },
              {
                  offset: 0.8,
                  color: 'rgba(77,75,221,.8)'
              },
              {
                  offset: 1,
                  color: 'rgba(77,75,221,0)'
              }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(255,157,96,.8)'
              },
              {
                  offset: 0.8,
                  color: 'rgba(246,84,157,.8)'
              },
              {
                  offset: 1,
                  color: 'rgba(246,84,157,0)'
              }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: 'rgba(132,225,145,.8)'
              },
              {
                  offset: 0.8,
                  color: 'rgba(106,185,242,.8)'
              },
              {
                  offset: 1,
                  color: 'rgba(106,185,242,0)'
              }
          ]),
      ],
      series: [{
              name: '',
              type: 'bar',
              xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
              yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
              data: [100, 100, 100, 100, 100, ],
              barWidth: 5,
              itemStyle: {
                  normal: {
                      color: 'rgba(255, 255, 255, .1)',
                  },
              },
              z: 1
          },
          {
              name: '0-2',
              type: 'bar',
              stack: 'Tik Tok',
              barWidth: 25,
              itemStyle: {
                  shadowColor: '#000',
                  shadowBlur: 10,
                  shadowOffsetY: 0,
                  shadowOffsetX: 0,
                  borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                              offset: 0,
                              color: 'rgba(240,82,255,1)'
                          },
                          {
                              offset: 0.8,
                              color: 'rgba(77,75,221,1)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(77,75,221,0)'
                          }
                      ],
                      false
                  ),
                  borderWidth: 1,
              },
              label: {
                  normal: {
                      show: false,
                      position: 'Right',
                      offset: [-20, 0],
                      formatter: '{c}%',
                      textStyle: {
                          align: 'center',
                          baseline: 'middle',
                          fontSize: 14,
                          fontWeight: '400',
                          color: '#fff',
                          textShadowColor:'#000',
                          textShadowBlur:'0',
                          textShadowOffsetX:1,
                          textShadowOffsetY:1,
                      }
                  },
              },
              data: [2.60,0.32,0.27,6.74,12.70,1.40,5.20,1.97,5.13,6.85,2.83]
          },
          {
              name: '2-4',
              type: 'bar',
              stack: 'Tik Tok',
              barWidth: 25,
              itemStyle: {
                  shadowColor: '#000',
                  shadowBlur: 10,
                  shadowOffsetY: 0,
                  shadowOffsetX: 0,
                  borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                              offset: 0,
                              color: 'rgba(102,255,124,.8)'
                          },
                          {
                              offset: 0.8,
                              color: 'rgba(106,185,242,.8)'
                          },
                          {
                              offset: 1,
                              color: 'rgba(106,185,242,0)'
                          }
                      ],
                      false
                  ),
                  borderWidth: 1,
              },
              label: {
                  normal: {
                      show:false,
                      position: 'right',
                      offset: [20, 0],
                      formatter: '{c}%',
                      textStyle: {
                          align: 'center',
                          baseline: 'middle',
                          fontSize: 14,
                          fontWeight: '400',
                          color: '#fff',
                          textShadowColor:'#000',
                          textShadowBlur:'0',
                          textShadowOffsetX:1,
                          textShadowOffsetY:1,
                      }
                  },
              },
              data: [25.36,17.11,3.23,20.26,35.24,11.46,11.20,14.98,14.72,16.14 ,12.72]
          },
          {
            name: '>4',
            type: 'bar',
            stack: 'Tik Tok',
            barWidth: 25,
            itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10,
                shadowOffsetY: 0,
                shadowOffsetX: 0,
                borderColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(102,255,124,.8)'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(106,185,242,.8)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(106,185,242,0)'
                        }
                    ],
                    false
                ),
                borderWidth: 1,
            },
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    offset: [20, 0],
                    formatter: '{c}%',
                    textStyle: {
                        align: 'center',
                        baseline: 'middle',
                        fontSize: 14,
                        fontWeight: '400',
                        color: '#fff',
                        textShadowColor:'#000',
                        textShadowBlur:'0',
                        textShadowOffsetX:1,
                        textShadowOffsetY:1,
                    }
                },
            },
            data: [72.04,82.57,96.51,73.00,52.06,87.13,83.60,83.05,80.15,77.01,84.45]
        },
          {
              name: '',
              type: 'bar',
              data: [100, 100, 100, 100, 100, ],
              barWidth: 10,
              itemStyle: {
                  normal: {
                      color: 'rgba(255, 255, 255, .1)',
                  },
              },
              z: 1
          },
      ]
  };
  
  
    // 3 配置项给实例对象
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });
  })();
// (function() {
//   //  1实例化对象
//   var myChart = echarts.init(document.querySelector(".linepiao .chart"));
//   // 2 指定配置项和数据
//   // "杭州市"
//   //     "湖州市"
//   //     "嘉兴市"
//   //     "宁波市"
//   //     "舟山市"
//   //     "丽水市"
//   //     "金华市"
//   //     "台州市"
//   //     "绍兴市"
//   //     "温州市"
//   //     "衢州市"
//   var  category= [{
//       name: "全省",
//       value: 4.5
//   },
//   {
//       name: "杭州",
//       value: 3.2
//   },
//   {
//       name: "湖州",
//       value: 3.4
//   },
//   {
//       name: "嘉兴",
//       value: 3.1
//   },
//   {
//       name: "宁波",
//       value: 2.9
//   },
//   {
//       name: "舟山",
//       value: 2.9
//   },
//   {
//       name: "丽水",
//       value: 3.1
//   },
//   {
//       name: "金华",
//       value: 3.2
//   },
//   {
//       name: "台州",
//       value: 3.1
//   },
//   {
//       name: "绍兴",
//       value: 3.4
//   },
//   {
//       name: "温州",
//       value: 2.9
//   },
//   {
//       name: "衢州",
//       value: 2.9
//   }
//   ]; // 类别
//   var total = 5; // 数据总数
//   var  datas = [];
//   category.forEach(value => {
//   datas.push(value.value);
//   });
//   var option = {
//     tooltip: {
//         trigger: "axis",
//         axisPointer: { // 坐标轴指示器，坐标轴触发有效
//             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
//         },
//         // borderRadius: 5,
//         // borderColor: "#6baab2",
//         // borderWidth: 1,
//         formatter: function(params) { // params[0].data.nameCode
//             let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
//             return (
//               params[0].name +
//               "<br>" +
//               "平均票价 ：" +
//               params[0].value
//             );
//         }
//     },
//     xAxis: {
//       max: total,
//       splitLine: {
//           show: false
//       },
//       axisLine: {
//           show: false
//       },
//       axisLabel: {
//           show: false
//       },
//       axisTick: {
//           show: false
//       }
//   },
//   grid: {
//       left: 80,
//       top: 20, // 设置条形图的边距
//       right: 80,
//       bottom: 20
//   },
//   yAxis: [{
//       type: "category",
//       inverse: false,
//       data: category,
//       axisLine: {
//           show: false
//       },
//       axisTick: {
//           show: false
//       },
//       axisLabel: {
//           show: false
//       }
//   }],
//   series: [{
//           // 内
//           type: "bar",
//           barWidth: 18,

//           legendHoverLink: false,
//           silent: true,
//           itemStyle: {
//               normal: {
//                   color: function(params) {
//                       var color;
//                       if(params.dataIndex==19){
//                            color = {
//                               type: "linear",
//                               x: 0,
//                               y: 0,
//                               x2: 1,
//                               y2: 0,
//                               colorStops: [{
//                                       offset: 0,
//                                       color: "#EB5118" // 0% 处的颜色
//                                   },
//                                   {
//                                       offset: 1,
//                                       color: "#F21F02" // 100% 处的颜色
//                                   }
//                               ]
//                           }
//                           }else if(params.dataIndex==18){
//                           color = {
//                               type: "linear",
//                               x: 0,
//                               y: 0,
//                               x2: 1,
//                               y2: 0,
//                               colorStops: [{
//                                       offset: 0,
//                                       color: "#FFA048" // 0% 处的颜色
//                                   },
//                                   {
//                                       offset: 1,
//                                       color: "#B25E14" // 100% 处的颜色
//                                   }
//                               ]
//                           }
//                           }else if(params.dataIndex==17){
//                           color = {
//                               type: "linear",
//                               x: 0,
//                               y: 0,
//                               x2: 1,
//                               y2: 0,
//                               colorStops: [{
//                                       offset: 0,
//                                       color: "#F8E972" // 0% 处的颜色
//                                   },
//                                   {
//                                       offset: 1,
//                                       color: "#E5C206" // 100% 处的颜色
//                                   }
//                               ]
//                           }
//                           }else{
//                           color = {
//                               type: "linear",
//                               x: 0,
//                               y: 0,
//                               x2: 1,
//                               y2: 0,
//                               colorStops: [{
//                                       offset: 0,
//                                       color: "#1588D1" // 0% 处的颜色
//                                   },
//                                   {
//                                       offset: 1,
//                                       color: "#0F4071" // 100% 处的颜色
//                                   }
//                               ]
//                           }
//                           }
//                           return color;
//                   },
//               }
//           },
//           label: {
//               normal: {
//                   show: true,
//                   position: "left",
//                   formatter: "{b}",
//                   textStyle: {
//                       color: "#fff",
//                       fontSize: 14
//                   }
//               }
//           },
//           data: category,
//           z: 1,
//           animationEasing: "elasticOut"
//       },
//       {
//           // 分隔
//           type: "pictorialBar",
//           itemStyle: {
//               normal:{
//                   color:"#061348"
//               }
//           },
//           symbolRepeat: "fixed",
//           symbolMargin: 6,
//           symbol: "rect",
//           symbolClip: true,
//           symbolSize: [1, 21],
//           symbolPosition: "start",
//           symbolOffset: [1, -1],
//           symbolBoundingData: this.total,
//           data: category,
//           z: 2,
//           animationEasing: "elasticOut"
//       },
//       {
//           // 外边框
//           type: "pictorialBar",
//           symbol: "rect",
//           symbolBoundingData: total,
//           itemStyle: {
//               normal: {
//                   color: "none"
//               }
//           },
//           label: {
//               normal: {
//                 formatter: (params) => {
//                   var text;
//                       if(params.dataIndex==1){
//                         text = '{a|  100%}{f|  '+params.data+'}';
//                       }else if(params.dataIndex==2){
//                         text = '{b|  100%}{f|  '+params.data+'}';
//                       }else if(params.dataIndex==3){
//                         text = '{c|  100%}{f|  '+params.data+'}';
//                       }else{
//                         text = '{d|  100%}{f|  '+params.data+'}';
//                       }
//                       return text;
//           },
//           rich:{
//             a: {
//                     color: 'red'
//                 },
//                 b: {
//                   color: 'blue'
//                 },
//                 c:{
//                   color: 'yellow'
//                 },
//                 d:{
//                   color:"green"
//                 },
//                 f:{
//                   color:"#ffffff"
//                 }
//           },
//           position: 'right',
//           distance: 0, // 向右偏移位置
//           show: true
//               }
//           },
//           data: datas,
//           z: 0,
//           animationEasing: "elasticOut"
//       },
//       {
//           name: "外框",
//           type: "bar",
//           barGap: "-120%", // 设置外框粗细
//           data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],
//           barWidth: 25,
//           itemStyle: {
//               normal: {
//                   color: "transparent", // 填充色
//                   barBorderColor: "#1C4B8E", // 边框色
//                   barBorderWidth: 1, // 边框宽度
//                   // barBorderRadius: 0, //圆角半径
//                   label: {
//                       // 标签显示位置
//                       show: false,
//                       position: "top" // insideTop 或者横向的 insideLeft
//                   }
//               }
//           },
//           z: 0
//       }
//   ]
// };


//   // 3 配置项给实例对象
//   myChart.setOption(option);
//   // 4 让图表跟随屏幕自动的去适应
//   window.addEventListener('resize',function() {
//       myChart.resize();
//   });
// })();
(function() {
  //  1实例化对象
  var myChart = echarts.init(document.querySelector(".linelie .chart"));
  // 2 指定配置项和数据
 
  var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
        },
    },
    legend: {
        // data: ["已完成", "进行中"],
        top: '5%',
        left: '5%',
        icon: 'rect',
        textStyle: {
            color: '#fff',
        },
    },
    grid: {
        top: '10%',
        left: '5%',
        right: '5%',
        bottom: '10%',
        containLabel: true,
    },
    xAxis: {
        min: 0,
        max: 100,
        type: 'value',
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.8)',
            },
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.3)', // 分割线颜色
            },
        },
    },
    yAxis: {
        type: 'category',
        //   data: ["已签收", "配送中", "已出库", "采购中", "接单中"],
        axisLabel: {
            color: 'rgba(255,255,255,0.8)',
        },
    },
    series: [
        {
            name: '0-2',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series',
            },
            // data: [121, 828, 144, 368, 390],
            barWidth: 12,
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(7,165,255,0.2)' },
                    { offset: 1, color: 'rgba(7,165,255,1)' },
                ]),
                borderColor: 'rgba(7,165,255,0.7)',
                shadowBlur: 16,
                shadowColor: 'rgba(7,165,255,1)',
            },
        },
        {
            name: '2-4',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series',
            },
            // data: [271, 132, 413, 210, 521],
            barWidth: 12,
            itemStyle: {
                label: {
                    show: true,
                },
                labelLine: {
                    show: false,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(41,244,236,0)' },
                    { offset: 1, color: 'rgba(41,244,236,1)' },
                ]),
                borderColor: '#a2f9f7',
                shadowBlur: 16,
                shadowColor: '#a2f9f7',
            },
            
        },
        {
            name: '4-6',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series',
            },
            // data: [271, 132, 413, 210, 521],
            barWidth: 12,
            itemStyle: {
                label: {
                    show: true,
                },
                labelLine: {
                    show: false,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(255,192,203,0)' },
                    { offset: 1, color: 'rgba(255,192,203,1)' },
                ]),
                borderColor: '	#FFC0CB',
                shadowBlur: 16,
                shadowColor: '	#FFC0CB',
            },
            
        },
        {
            name: '6-8',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series',
            },
            // data: [271, 132, 413, 210, 521],
            barWidth: 12,
            itemStyle: {
                label: {
                    show: true,
                },
                labelLine: {
                    show: false,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(	240,230,140,0)' },
                    { offset: 1, color: 'rgba(	240,230,140,1)' },
                ]),
                borderColor: '#F0E68C',
                shadowBlur: 16,
                shadowColor: '#F0E68C',
            },
            
        },
        {
            name: '>8',
            type: 'bar',
            stack: 'total',
            label: {
                show: false,
            },
            emphasis: {
                focus: 'series',
            },
            // data: [271, 132, 413, 210, 521],
            barWidth: 12,
            itemStyle: {
                label: {
                    show: true,
                },
                labelLine: {
                    show: false,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(	100,149,237,0)' },
                    { offset: 1, color: 'rgba(	100,149,237,1)' },
                ]),
                borderColor: '#6495ED',
                shadowBlur: 16,
                shadowColor: '#6495ED',
            },
            
        },
    ],
    dataset: {
        source: [
            { status: '衢州', value1: 66.13, value2: 6.07, value3: 12.75, value4: 4.86, value5: 10.19 },
            

            { status: '温州', value1: 47.25, value2: 19.94, value3: 15.71, value4: 5.96, value5: 11.14 },
           

            { status: '绍兴', value1: 64.95, value2: 7.68, value3: 17.65, value4: 9.33, value5: 0.38 },
            
            { status: '台州', value1: 35.50, value2: 23.97, value3: 19.75, value4: 12.44, value5: 8.35 },
            
            { status: '金华', value1: 57.46, value2: 13.45, value3: 15.93, value4: 6.57, value5: 6.60 },
            

            { status: '丽水', value1: 17.78, value2: 11.80, value3:14.55, value4: 11.96, value5: 43.92 },
            

            { status: '杭州', value1: 43.09, value2: 26.30, value3: 15.80, value4: 6.13, value5: 8.68 },

            { status: '舟山', value1: 29.68, value2: 62.90, value3:2.12, value4: 2.83, value5: 2.47 },
            
            { status: '宁波', value1: 69.81, value2: 21.91, value3: 8.28, value4: 0, value5: 0 },
            
            { status: '嘉兴', value1: 100, value2: 0, value3: 0, value4: 0, value5: 0 },
            { status: '湖州', value1: 100, value2: 0, value3: 0, value4: 0, value5: 0 },
        

  //     "湖州市"
  //     "嘉兴市"
  //     "宁波市"
  //     "舟山市"
  //     "丽水市"
  //     "金华市"
  //     "台州市"
  //     "绍兴市"
  //     "温州市"
  //     "衢州市"
        ],
    },
  };


  // 3 配置项给实例对象
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
  });
})();
(function() {
  //  1实例化对象
  var myChart = echarts.init(document.querySelector(".no_hd .chart"));
  // 2 指定配置项和数据
  var xdata = ['杭州市', "湖州市","嘉兴市","宁波市","舟山市","丽水市","金华市","台州市","绍兴市","温州市","衢州市"];
  var data = [100, 100, 100,95.04, 79.86,29.68,66.05, 47.46, 66.92,80.81, 68.49 ];
  var maxArr = [100, 100, 100,100, 100, 100,100, 100, 100,100, 100];
 
  var option = {
    tooltip: {
        trigger: "axis",
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        // borderRadius: 5,
        // borderColor: "#6baab2",
        // borderWidth: 1,
        formatter: function(params) { // params[0].data.nameCode
            let dot = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:#02C4DD"></span>';
            return (
              params[0].name +
              "<br>" +
              "占比 ：" +
              params[0].value
            );
        }
    },
    grid: {
        left: "4%",
        right: "4%",
        bottom: "3%",
        top: "15%",
        containLabel: true
    },
    xAxis: {
        data: xdata,
        triggerEvent: true,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            rotate: 0,
            interval: 0,
            textStyle: {
                padding: [14,0,0,0],
                fontSize: 14,
                color: "rgba(255,255,255,1)"
            }
        }
    },
    yAxis: {
        name: "单位：个数",
        triggerEvent: true,
        
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "rgb(148,159,167)",
                fontSize: 12
            }
        }
    },
    // color: ["#e54035"],
    series: [{
            name: "数量",
            barMinHeight: 10,
            type: "pictorialBar",
            barCategoryGap: "60%",
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    //barBorderRadius: 5,
                    //渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#01EAED"
                        },
                        {
                            offset: 0.5,
                            color: "#02C4DD"
                        },
                        {
                            offset: 1,
                            color: "#029ED9"
                        }
                    ])
                }
            },
            label: {
                normal: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                        fontSize:12
                    }
                }
            },
            data: data,
            z: 10
        },
        {
            name: "hill",
            type: "bar",
            barWidth: '20%',
            symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            itemStyle: {
                normal: {
                    color: "rgba(11,47,68,.8)"
                }
            },
            data: maxArr,
            z: 9
        }
    ]
  };


  // 3 配置项给实例对象
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
  });
})();
(function() {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  $.getJSON('../json/zhejiang.json',function(geoMap) {
    console.log(geoMap);
    echarts.registerMap('zhejiang',geoMap);
    var data= [
      {name: "杭州市", value: 100},
      {name: "湖州市", value: 100},
      {name: "嘉兴市", value: 100},
      {name: "宁波市", value: 95.04},
      {name: "舟山市", value: 79.86},
      {name: "丽水市", value: 29.68},
      {name: "衢州市", value: 68.49},
      {name: "金华市", value: 66.05},
      {name: "台州市", value: 47.46},
      {name: "绍兴市", value: 66.92},
      {name: "温州市", value: 80.81}
    ];
    var geoCoordMap = {
      "杭州市": [120.153576, 30.287459],
      "湖州市": [120.102398, 30.867198],
      "嘉兴市": [120.750865, 30.762653],
      "宁波市": [121.549792, 29.868388],
      "舟山市": [122.106863, 30.016028],
      "丽水市": [119.921786, 28.451993],
      "金华市": [119.649506, 29.089524],
      "台州市": [121.428599, 28.661378],
      "绍兴市": [120.582112, 29.997117],
      "温州市": [120.672111, 28.000575],
      "衢州市": [118.87263, 28.941708]
    };
      var max = 480, min = 9; // todo 
      var maxSize4Pin = 100, minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
              res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
              });
          }
      }
      return res;
  };


      option = {
          tooltip: {
              trigger: 'item',
              formatter: function (params) {
                if(typeof(params.value)[2] == "undefined"){
                  return params.name + ' : ' + params.value + "%";
                }else{
                  return params.name + ' : ' + params.value[2] + "%";
                }
              }
          },
          
          visualMap: {
              show: true,
			  textStyle: {
				  normal: {
					  color:'#fff',
					  fontSize:16
				  }
			  },
              min: 0,
              max: 100,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'], // 文本，默认为数值文本
              calculable: true,
              seriesIndex: [1],
			  precision:2,
			  outOfRange:{
				  color: ['#3B5077']//默认不选中颜色
			  },
              inRange: {
                  // color: ['#3B5077', '#031525'] // 蓝黑
                  // color: ['#ffc0cb', '#800080'] // 红紫
                  // color: ['#3C3B3F', '#605C3C'] // 黑绿
                  color: ['#B0C4DE','#87CEFA',"#00BFFF","#6495ED","#1E90FF"] // 黑紫黑
                  // color: ['#23074d', '#cc5333'] // 紫红
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#1488CC', '#2B32B2'] // 浅蓝
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿
                  // color: ['#00467F', '#A5CC82'] // 蓝绿

              }
          },
          geo: {
              show: true,
              type:'map',
              map: 'zhejiang',
              zoom:1.4,
              label: {
                  normal: {
                      show: false,
                  },
                  emphasis: {
                      show: false,
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#142957',
                      borderColor: '#0692a4',
                  },
                  emphasis: {
                      areaColor: '#0b1c2d',
                  }
              }
          },
          series : [
          {
              name: 'credit_pm2.5',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(data),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#D4EEFF'
                  }
              }
          },
          {
              type: 'map',
              map: 'zhejiang',
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                  normal: {
                      show: false
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          color: '#fff'
                      }
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#031525',
                      borderColor: '#3B5077',
                  },
                  emphasis: {
                      areaColor: '#2B91B7'
                  }
              },
              animation: false,
              data: data
          },
          {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: 1,
              label: {
              	normal: {
              		show: true,
              		formatter: '{b}\n 通村率：{@[2]}%',
              		lineHeight: 20,
              	   backgroundColor:'rgba(255,255,255,.9)',
              	   borderColor:'#80cffd',
              	   borderWidth:'1',
              	   padding:[5,10,4],
              	   color:'#000000',
              	   fontSize: 14,
              	   fontWeight:'normal',
              	}
              },
              itemStyle: {
                  normal: {
                      color: '#C9C132', //标志颜色
                  }
              },
              zlevel: 6,
              data: convertData(data)
          }
      ]
      };
      myChart.setOption(option);
	  
	  myChart.on("click",function(params){//地图上点击事件,省级可以点击，市级不能
	  	if(params.name.indexOf("绍兴市") != -1) {
	  		window.open("../cityBus/sxprosperity.html","_self");
	  	}
	  });
	  
      window.addEventListener('resize',function() {
        myChart.resize();
      });
  });
    
  // // 监听浏览器缩放，图表对象调用缩放resize函数
  //   window.addEventListener("resize", function() {
  //   myChart.resize();
  //   })
  // })
})();
